<template>
	<div class="statistics-title">
		<div
			v-for="(item, index) in statisticsData"
			:key="index"
			class="title-statistics-item"
			:style="{ marginRight: index + 1 === statisticsData.length ? '10px' : '' }"
		>
			<div v-for="(twoItem, twoIndex) in item" :key="twoIndex" class="statistics-page">
				<div class="statistics-page-icon">
					<img
						v-if="index === 0 && twoIndex === 0"
						class="statistics-page-icon-image"
						src="@/assets/images/material/icon_sck_img@3x.png"
					/>
					<img
						v-if="twoIndex === 1"
						class="statistics-page-icon-image"
						src="@/assets/images/material/icon_sck_img_money@3x.png"
					/>
					<img
						v-if="index === 0 && twoIndex === 2"
						class="statistics-page-icon-image"
						src="@/assets/images/material/icon_sck_img_buy@3x.png"
					/>
					<img
						v-if="index === 1 && twoIndex === 0"
						class="statistics-page-icon-image"
						src="@/assets/images/material/icon_sck_video@3x.png"
					/>
					<img
						v-if="index === 1 && twoIndex === 2"
						class="statistics-page-icon-image"
						src="@/assets/images/material/icon_sck_video_buy@3x.png"
					/>
				</div>
				<div class="statistics-page-info">
					<div class="statistics-page-info-text">{{ iconUrlList[twoItem.name].text }}</div>
					<div class="statistics-page-info-num">{{ twoItem.num }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getMaterialStatistics } from '../../../api/material';

const iconUrlList = Object.freeze({
	imageInventory: {
		text: '图片入库总数'
	},
	imageMoney: {
		text: '图片售卖总金额'
	},
	imageSaleNum: {
		text: '图片售卖总数（张）'
	},
	videoInventory: {
		text: '视频入库总数'
	},
	videoMoney: {
		text: '视频售卖总金额'
	},
	videoSaleNum: {
		text: '视频售卖总数（个）'
	}
});
export default {
	name: 'MaterialTitleStatistics',
	props: {},
	data() {
		return {
			iconUrlList,
			statisticsData: [
				[
					{ num: 0, name: 'imageInventory' },
					{ num: 0, name: 'imageMoney' },
					{ num: 0, name: 'imageSaleNum' }
				],
				[
					{ num: 0, name: 'videoInventory' },
					{ num: 0, name: 'videoMoney' },
					{ num: 0, name: 'videoSaleNum' }
				]
			]
		};
	},
	created() {
		this.getStatisticsData(0);
		this.getStatisticsData(1);
	},
	methods: {
		getStatisticsData(type) {
			const params = { resourceType: type + 1 };
			getMaterialStatistics(params).then((res) => {
				const { data } = res;
				this.statisticsData[type][0].num = data.inStorageTotal.toLocaleString();
				//格式化金额格式和UI一样
				const strMoney = Number(data.salePriceYuan).toLocaleString();
				let num = '¥';
				if (strMoney.indexOf('.') === -1) {
					num = num + strMoney + '.00';
				} else if (strMoney.indexOf('.') + 2 === strMoney.length) {
					num = num + strMoney + '0';
				} else {
					num = num + strMoney;
				}
				this.statisticsData[type][1].num = num;
				this.statisticsData[type][2].num = data.saleTotal.toLocaleString();
			});
		}
	}
};
</script>

<style lang="less" scoped>
.statistics-title {
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.title-statistics-item {
	flex: 1;
	height: 76px;
	background: linear-gradient(180deg, #eff6fe 0%, #fdfdfd 100%);
	border-radius: 4px;
	border: 1px solid #f0f0f0;

	display: flex;
	align-items: center;
	margin-left: 10px;
}
.statistics-page {
	display: flex;
	flex: 1;
	justify-content: center;
	&-icon {
		height: 47px;
		&-image {
			height: 42px;
			width: 42px;
		}
	}
	&-info {
		margin-left: 20px;
		&-text {
			font-size: 12px;
			font-weight: 400;
			color: #999999;
		}
		&-num {
			font-size: 20px;
			font-weight: bold;
			color: #333333;
		}
	}
}
</style>
